<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.w3.org/1999/xhtml">

<div th:replace="~{component/head::head}"></div>

<body>

<div th:replace="~{component/header::header}"></div>

<div class="container-fluid">
  <div class="row">

    <div th:replace="~{component/nav::nav}"></div>

    <main id="app" class="col-md-9 ms-sm-auto col-lg-10 px-md-4 p-4">

      <h3>我的余额：{{account.amount}} 元，冻结：{{account.freezeAmount}} 元，可用余额：{{(account.amount - account.freezeAmount).toFixed(2)}}</h3>
      <br>
      <div class="table-responsive mt-3 text-center">
        <table class="table table-striped">
          <thead>
          <tr>
            <th scope="col">发生时间</th>
            <th scope="col">变更前</th>
            <th scope="col">变更</th>
            <th scope="col">变更后</th>
            <th scope="col">描述</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="log in accountLogs" :key="log.id">
            <td>{{log.time}}</td>
            <td>{{log.amountBefore}}</td>
            <td>{{log.amount}}</td>
            <td>{{log.amountAfter}}</td>
            <td>{{log.desc}}</td>
          </tr>
          </tbody>
        </table>
      </div>

      <page @change-page='queryAccountLog' :pagesize='pagination.pageSize' :total='pagination.total' :page='pagination.current' />

    </main>
  </div>
</div>

<script>
  // 下面这行声明在一个页面只能有一次，header里已经有了，所以这里去掉
  // const {createApp, ref} = Vue;
  const app = createApp({
    components: {
      page
    },
    setup() {
      const account = ref();
      account.value = {};
      const accountLogs = ref();
      accountLogs.value = [];
      const pagination = ref({
        current: 1,
        pageSize: 5,
        total: 0
      });

      const queryAccount = function () {
        axios.get("/system/account/query-one").then((response) => {
          const data = response.data;
          if (data.success) {
            account.value = data.content;
          } else {
            Msg.error(data.message);
          }
        });
      };

      const queryAccountLog = function (current) {
        if (Tool.isEmpty(current)) {
          current = 1;
        }
        axios.get("/system/account-log/query-list", {
          params: {
            page: current,
            size: pagination.value.pageSize
          }
        }).then((response) => {
          const data = response.data;
          if (data.success) {
            accountLogs.value = data.content.list;
            // 设置分页控件的值
            pagination.value.total = Number(data.content.total);
          } else {
            Msg.error(data.message);
          }
        });
      };

      onMounted(() => {
        queryAccount();
        queryAccountLog();
      });

      return {
        account,
        accountLogs,
        queryAccountLog,
        pagination
      }
    }
  });
  app.mount("#app");
</script>

</body>
</html>
